const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

module.exports = {
  mode: "development",
  entry: "./src/index.js", // 修改为入口文件路径
  output: {
    filename: "bundle.js", // 输出文件名
    path: path.resolve(__dirname, "dist"), // 输出路径
  },
  module: {
    rules: [
      // {
      //   test: /\.tsx?$/, // 修改为匹配 .ts 和 .tsx 文件
      //   exclude: /node_modules/,
      //   use: {
      //     loader: "ts-loader",
      //   },
      // }, 
      {
        test: /\.jsx?$/, // 修改为匹配 .js 和 .jsx 文件
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      //   {
      //     test: /\.scss$/,
      //     use: [
      //       MiniCssExtractPlugin.loader, // 提取 CSS 到单独的文件
      //       {
      //         loader: "css-loader",
      //         options: {
      //           sourceMap: true, // 启用 Source Maps
      //           importLoaders: 1, // 配置 importLoaders
      //           modules: { namedExport: false }, // 开启 CSS Modules
      //         },
      //       },
      //       "sass-loader", // 编译 SCSS 文件为 CSS
      //     ],
      //   },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html", // 指定模板文件路径
      filename: "index.html", // 输出文件名
    }),
    new MiniCssExtractPlugin({
      filename: "styles.css", // 输出的 CSS 文件名
    }),
  ],
  optimization: {
    minimizer: [
      new CssMinimizerPlugin(), // 添加 CssMinimizerPlugin
    ],
  },
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"), // 将 @ 指向 src 目录
    },
    extensions: [".js", ".jsx", ".tsx", ".ts"], // 添加文件扩展名
  },
  devServer: {
    static: {
      directory: path.join(__dirname, "public"),
    },
    historyApiFallback: true, // 关键配置
    port: 8080,
  },
};
